<template>
  <div>
    <el-form ref="formRef" :model="formJson.model"  >
      <slot name="up"></slot>
      <el-row :gutter="20">
        <el-col
          :span="config.span"
          v-for="(config, index) in formJson.schema"
          :key="index"
        >
          <el-form-item v-bind="config.attrs" :prop="config.prop" 
        :rules="config.rules"
          >
            <template #label >
              <template v-if="config.renderLabel">
                <component
                  :is="config.renderLabel"
               
                ></component>
              </template>
              <slot v-else :name="config.prop + 'Label'">
                {{ config.label }} 
              </slot>
            </template>
            <template v-if="config.render">
              <component :is="config.render" ></component>
            </template>
          
            <slot v-else :name="config.prop">
              
              <component
              class="el-input-form-component"
              style="width: 100%"
                :is="config.componentName"
              v-model="formJson.model[config.prop]"
                v-bind="config.attrs"
                v-on="config.events"
              >
                  <template v-if="config.children">
                            <component
                            v-for="(item, index) in config.children.options"
                            :key="index"
                :is="config.children.componentName"
                v-bind="item"
             
              >
               
              </component>
                  </template>
              </component>
            </slot>
          </el-form-item>
        </el-col>
      </el-row>
      <slot name="Under"></slot>
    </el-form>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted,watch } from "vue";
// import formItemCom from "./formItem.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

const state = reactive({});

const props = defineProps({
  formJson: {
    type: Object,
    required: true,
    default: () => ({
      schema: [],
      model: {},
    }),
  },

  // model: {
  //   type: Object,
  //   required: true,
  // },
});
const formRef = ref();
const rules:any = ref([]);
watch(()=>props.formJson,(val)=>{
const schema = val.schema
rules.value = [];
for (let index = 0; index < schema.length; index++) {
  const element = schema[index];
    if(element.rules){
      rules.value.push({
        [element.prop]:element.rules
      })
    }
}
console.log('rules.value :>> ', rules.value);
},{
  immediate:true//开启监听立即执行一次
})
const getModel = (data: any) => {
  let model:any = {}
for (let index = 0; index < data.length; index++) {
  const element = data[index];
      model[element.prop]=element.value
}
return model;
}
const validate = () =>{
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid:any) => {
       if (valid) {
        resolve(props.formJson.model);
    } else {
      reject(false)
    }
    })
  }
  );
}
defineExpose({
  validate
});
</script>

<style scoped lang="scss">
.el-input-form-component{
 
}
</style>
